<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>

// 解构赋值
// 解析数据结构并对变量/形参进行赋值
// 通常用于对数组或对象进行解构赋值

let arr = [10,20,30];
let obj = {
    name: '老王',
    age: 37,
    sex: '男'
}

// 正常访问数据的方式：
console.log( arr[0], arr[1], arr[2] );
console.log( obj.name, obj.age, obj.sex );

function test1(n1,n2,n3){
    console.log( n1+n2+n3 );
}
// test1(arr[0],arr[1],arr[2]);

function test2(obj){
    console.log( `大家好，我叫${obj.name}，今年${obj.age}岁，性别${obj.sex}` );
}
// test2(obj);


// 将右边的arr数组解构赋值给左边的变量（一一对应）
let [n1,n2,n3,n4] = arr;
console.log( n1,n2,n3,n4 );// 10 20 30 undefined

// 将右边的obj对象解构赋值给左边的变量（变量名必须和对象的key同名）
let {sex,name,age,abc} = obj;
console.log( sex,name,age,abc );// 男 老王 37 undefined

// 将实参解构赋值给形参
function test3([n1,n2,n3]){
    console.log( n1+n2+n3 );
}
test3(arr);// [n1,n2,n3] = arr

function test4({name,age,sex}){
    console.log( `大家好，我叫${name}，今年${age}岁，性别${sex}` );
}
test4(obj);// {name,age,sex} = obj

</script>
</body>
</html>